<script setup>
import { inject } from 'vue';

const fileStore = inject('fileStore');

defineProps({
  selectedFunction: {
    type: String,
    required: true
  }
});
</script>

<template>
  <div class="meter-upload-section">
    <h3 class="section-title">
      {{
        selectedFunction === 'compare'
          ? '请分别上传两个文件（第一个为旧表，第二个为新表）'
          : selectedFunction === 'sync_remarks'
          ? '请分别上传两个文件（第一个为主表，第二个为参考表）'
          : selectedFunction === 'filter_common_values'
          ? '请分别上传两个文件（第一个为要筛选的表，第二个为参考表）'
          : selectedFunction === 'compare_header_consistency'
          ? '请分别上传两个文件进行数据一致性对比'
          : '请分别上传两个文件'
      }}
    </h3>
    <div class="meter-upload-group">
      <div class="upload-card">
        <div class="upload-card-header">
          <i-ep-folder class="mr-2" />
          <span>第一个文件</span>
        </div>
        <div class="upload-card-body">
          <el-upload
            :file-list="fileStore.compareFiles.old ? [fileStore.compareFiles.old] : []"
            :auto-upload="false"
            :on-change="(file) => fileStore.updateCompareFile('old', file)"
            :on-remove="(file) => fileStore.removeCompareFile('old', file)"
            class="meter-upload"
            accept=".xlsx,.xls"
          >
            <el-button type="primary" class="upload-button">
              <i-ep-Upload class="mr-2" />
              选择文件
            </el-button>
            <template #tip>
              <div class="upload-tip">
                {{
                  selectedFunction === 'compare'
                    ? '第一个为旧表（被过滤的目标）'
                    : selectedFunction === 'sync_remarks'
                    ? '第一个为主表（被同步备注的目标）'
                    : selectedFunction === 'filter_common_values'
                    ? '第一个为要筛选的表'
                    : selectedFunction === 'compare_header_consistency'
                    ? '第一个表'
                    : '第一个文件'
                }}
              </div>
            </template>
          </el-upload>
        </div>
      </div>

      <div class="upload-card">
        <div class="upload-card-header">
          <i-ep-folder class="mr-2" />
          <span>第二个文件</span>
        </div>
        <div class="upload-card-body">
          <el-upload
            :file-list="fileStore.compareFiles.new ? [fileStore.compareFiles.new] : []"
            :auto-upload="false"
            :on-change="(file) => fileStore.updateCompareFile('new', file)"
            :on-remove="(file) => fileStore.removeCompareFile('new', file)"
            class="meter-upload"
            accept=".xlsx,.xls"
          >
            <el-button type="primary" class="upload-button">
              <i-ep-Upload class="mr-2" />
              选择文件
            </el-button>
            <template #tip>
              <div class="upload-tip">
                {{
                  selectedFunction === 'compare'
                    ? '第二个为新表'
                    : selectedFunction === 'sync_remarks'
                    ? '第二个为参考表'
                    : selectedFunction === 'filter_common_values'
                    ? '第二个为参考表'
                    : selectedFunction === 'compare_header_consistency'
                    ? '第二个表'
                    : '第二个文件'
                }}
              </div>
            </template>
          </el-upload>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.meter-upload-section {
  margin-top: 24px;
}

.section-title {
  margin-bottom: 20px;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  gap: 8px;
}

.meter-upload-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.upload-card {
  background: #fafafa;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
}

.upload-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: #409eff;
}

.upload-card-header {
  background: linear-gradient(135deg, #409eff, #79bbff);
  color: white;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.upload-card-body {
  padding: 20px;
}

.meter-upload {
  width: 100%;
}

.upload-button {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
  text-align: center;
}

@media (max-width: 768px) {
  .meter-upload-group {
    grid-template-columns: 1fr;
  }
}
</style>
